<template>
  <view class="yhq2-wrap">
    <view class="yhq2-tabr" :style="{ top: headerTop }">
      <view :class="{ on: typeClass == 'valid' }" @tap="switchType('valid')">可用({{ couponValidList.length }})</view>
      <view :class="{ on: typeClass == 'invalid' }" @tap="switchType('invalid')">已失效</view>
      <view class="border" :class="typeClass"></view>
    </view>
    <view class="yhq2-list">
      <!-- 优惠券列表 -->
      <view class="sub-list valid" :class="subState">
        <view class="tis" v-if="couponValidList.length == 0">没有数据~</view>
        <view class="row" v-for="(row, index) in couponValidList" :key="index">
          <!-- 删除按钮 -->
          <view class="menu" @tap.stop="deleteCoupon(row.id, couponValidList)">
            <view class="shanchu">删除</view>
          </view>
          <!-- content -->
          <view class="carrier" :class="[typeClass == 'valid' ? (theIndex == index ? 'open' : oldIndex == index ? 'close' : '') : '']"
            @touchstart="touchStart(index, $event)" @touchmove="touchMove(index, $event)" @touchend="touchEnd(index, $event)">
            <view class="left">
              <view class="title">{{ row.title }}</view>
              <view class="term">{{ row.termStart }} ~ {{ row.termEnd }}</view>
              <view class="gap-top"></view>
              <view class="gap-bottom"></view>
            </view>
            <view class="right">
              <view class="ticket">
                <view class="num">{{ row.ticket }}</view>
                <view class="unit">元</view>
              </view>
              <view class="criteria">{{ row.criteria }}</view>
              <view class="use">去使用</view>
            </view>
          </view>
        </view>
      </view>
      <view class="sub-list invalid" :class="subState">
        <view class="tis" v-if="couponinvalidList.length == 0">没有数据~</view>
        <view class="row" v-for="(row, index) in couponinvalidList" :key="index">
          <!-- 删除按钮 -->
          <view class="menu" @tap.stop="deleteCoupon(row.id, couponinvalidList)">
            <view class="shanchu">删除</view>
          </view>
          <!-- content -->
          <view class="carrier" :class="[typeClass == 'invalid' ? (theIndex == index ? 'open' : oldIndex == index ? 'close' : '') : '']"
            @touchstart="touchStart(index, $event)" @touchmove="touchMove(index, $event)" @touchend="touchEnd(index, $event)">
            <view class="left">
              <view class="title">{{ row.title }}</view>
              <view class="term">{{ row.termStart }} ~ {{ row.termEnd }}</view>
              <view class="icon shixiao"></view>
              <view class="gap-top"></view>
              <view class="gap-bottom"></view>
            </view>
            <view class="right invalid">
              <view class="ticket">
                <view class="num">{{ row.ticket }}</view>
                <view class="unit">元</view>
              </view>
              <view class="criteria">{{ row.criteria }}</view>
              <view class="use">去查看</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      couponValidList: [
        { id: 1, title: '日常用品立减10元', termStart: '2019-04-01', termEnd: '2019-05-30', ticket: '10', criteria: '满50使用' },
        { id: 2, title: '家用电器立减100元', termStart: '2019-04-01', termEnd: '2019-05-30', ticket: '100', criteria: '满500使用' },
        { id: 3, title: '全场立减10元', termStart: '2019-04-01', termEnd: '2019-05-30', ticket: '10', criteria: '无门槛' },
        { id: 4, title: '全场立减50元', termStart: '2019-04-01', termEnd: '2019-05-30', ticket: '50', criteria: '满1000使用' }
      ],
      couponinvalidList: [
        { id: 1, title: '日常用品立减10元', termStart: '2019-04-01', termEnd: '2019-05-30', ticket: '10', criteria: '满50使用' },
        { id: 2, title: '家用电器立减100元', termStart: '2019-04-01', termEnd: '2019-05-30', ticket: '100', criteria: '满500使用' },
        { id: 3, title: '全场立减10元', termStart: '2019-04-01', termEnd: '2019-05-30', ticket: '10', criteria: '无门槛' },
        { id: 4, title: '全场立减50元', termStart: '2019-04-01', termEnd: '2019-05-30', ticket: '50', criteria: '满1000使用' }
      ],
      headerTop: 0,
      //控制滑动效果
      typeClass: 'valid',
      subState: '',
      theIndex: null,
      oldIndex: null,
      isStop: false
    };
  },
  onPageScroll(e) { },
  //下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
  onPullDownRefresh() {
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  created() {
    //兼容H5下排序栏位置
    // #ifdef H5
    //定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
    let Timer = setInterval(() => {
      let uniHead = document.getElementsByTagName('uni-page-head');
      if (uniHead.length > 0) {
        this.headerTop = uniHead[0].offsetHeight + 'px';
        clearInterval(Timer); //清除定时器
      }
    }, 1);
    // #endif
  },
  methods: {
    switchType(type) {
      if (this.typeClass == type) {
        return;
      }
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
      });
      this.typeClass = type;
      this.subState = this.typeClass == '' ? '' : 'show' + type;
      setTimeout(() => {
        this.oldIndex = null;
        this.theIndex = null;
        this.subState = this.typeClass == 'valid' ? '' : this.subState;
      }, 200);
    },
    //控制左滑删除效果-begin
    touchStart(index, event) {
      //多点触控不触发
      if (event.touches.length > 1) {
        this.isStop = true;
        return;
      }
      this.oldIndex = this.theIndex;
      this.theIndex = null;
      //初始坐标
      this.initXY = [event.touches[0].pageX, event.touches[0].pageY];
    },
    touchMove(index, event) {
      //多点触控不触发
      if (event.touches.length > 1) {
        this.isStop = true;
        return;
      }
      let moveX = event.touches[0].pageX - this.initXY[0];
      let moveY = event.touches[0].pageY - this.initXY[1];

      if (this.isStop || Math.abs(moveX) < 5) {
        return;
      }
      if (Math.abs(moveY) > Math.abs(moveX)) {
        // 竖向滑动-不触发左滑效果
        this.isStop = true;
        return;
      }

      if (moveX < 0) {
        this.theIndex = index;
        this.isStop = true;
      } else if (moveX > 0) {
        if (this.theIndex != null && this.oldIndex == this.theIndex) {
          this.oldIndex = index;
          this.theIndex = null;
          this.isStop = true;
          setTimeout(() => {
            this.oldIndex = null;
          }, 150);
        }
      }
    },

    touchEnd(index, $event) {
      //解除禁止触发状态
      this.isStop = false;
    },

    //删除商品
    deleteCoupon(id, List) {
      let len = List.length;
      for (let i = 0; i < len; i++) {
        if (id == List[i].id) {
          List.splice(i, 1);
          break;
        }
      }
      this.oldIndex = null;
      this.theIndex = null;
    },

    discard() {
      //丢弃
    }
  }
};
</script>
<style>
.yhq2-wrap view {
  display: flex;
  flex-wrap: wrap;
}
.yhq2-wrap page {
  position: relative;
  background-color: #f5f5f5;
}
.yhq2-wrap .hidden {
  display: none !important;
}

.yhq2-wrap .yhq2-tabr {
  background-color: #fff;
  width: 94%;
  height: 95upx;
  padding: 0 3%;
  border-bottom: solid 1upx #dedede;
  z-index: 10;
}
.yhq2-wrap .yhq2-tabr view {
  width: 50%;
  height: 90upx;
  justify-content: center;
  align-items: center;
  font-size: 32upx;
  color: #999;
}
.yhq2-wrap .yhq2-tabr .on {
  color: #f06c7a;
}
.yhq2-wrap .yhq2-tabr .border {
  height: 4upx;
  background-color: #f06c7a;
  transition: all 0.3s ease-out;
}
.yhq2-wrap .yhq2-tabr .border.invalid {
  transform: translate3d(100%, 0, 0);
}
.yhq2-wrap .yhq2-list {
  width: 100%;
  display: block;
  position: relative;
}
@keyframes showValid {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes showInvalid {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.yhq2-wrap .yhq2-list .sub-list {
  width: 100%;
  padding: 20upx 0 120upx 0;
}
.yhq2-wrap .yhq2-list .sub-list .tis {
  width: 100%;
  height: 60upx;
  justify-content: center;
  align-items: center;
  font-size: 32upx;
}
.yhq2-wrap .yhq2-list .sub-list .row {
  width: 92%;
  height: 24vw;
  margin: 20upx auto 10upx auto;
  border-radius: 8upx;
  /* box-shadow: 0upx 0 10upx rgba(0,0,0,0.1); */
  align-items: center;
  position: relative;
  overflow: hidden;
  z-index: 4;
  border: 0;
}
.yhq2-wrap .yhq2-list .sub-list .menu {
  position: absolute;
  width: 28%;
  height: 100%;
  right: 0;
  justify-content: center;
  align-items: center;
  background-color: red;
  color: #fff;
  z-index: 2;
}
.yhq2-wrap .yhq2-list .sub-list .icon {
  color: #fff;
  font-size: 50upx;
}
.yhq2-wrap .yhq2-list .sub-list .carrier {
  background-color: #fff;
  position: absolute;
  width: 100%;
  padding: 0 0;
  height: 100%;
  z-index: 3;
  flex-wrap: nowrap;
}
@keyframes showMenu {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-28%);
  }
}
@keyframes closeMenu {
  0% {
    transform: translateX(-28%);
  }
  100% {
    transform: translateX(0);
  }
}
.yhq2-wrap .yhq2-list .sub-list .carrier.open {
  animation: showMenu 0.25s linear both;
}
.yhq2-wrap .yhq2-list .sub-list .carrier.close {
  animation: closeMenu 0.15s linear both;
}
.yhq2-wrap .yhq2-list .sub-list .left {
  width: 100%;
  position: relative;
}
.yhq2-wrap .yhq2-list .sub-list .left .gap-top,
.gap-bottom {
  position: absolute;
  width: 20upx;
  height: 20upx;
  right: -10upx;
  border-radius: 100%;
  background-color: #f5f5f5;
}
.yhq2-wrap .yhq2-list .sub-list .left .gap-top {
  top: -10upx;
}
.yhq2-wrap .yhq2-list .sub-list .left .gap-bottom {
  bottom: -10upx;
}
.yhq2-wrap .yhq2-list .sub-list .left .shixiao {
  position: absolute;
  right: 20upx;
  font-size: 150upx;
  z-index: 6;
  color: rgba(153, 153, 153, 0.2);
}
.yhq2-wrap .yhq2-list .sub-list .left .title {
  padding-top: 3vw;
  width: 90%;
  margin: 0 5%;
  font-size: 36upx;
}
.yhq2-wrap .yhq2-list .sub-list .left .term {
  width: 90%;
  margin: 0 5%;
  font-size: 26upx;
  color: #999;
}

.yhq2-wrap .yhq2-list .sub-list .right {
  flex-shrink: 0;
  width: 28%;
  color: #fff;
  background: linear-gradient(to right, #ec625c, #ee827f);
  justify-content: center;
}
.yhq2-wrap .yhq2-list .sub-list .right .invalid {
  background: linear-gradient(to right, #aaa, #999);
}
.yhq2-wrap .yhq2-list .sub-list .right .use {
  color: #aaa;
}
.yhq2-wrap .yhq2-list .sub-list .right .ticket,
.criteria {
  width: 100%;
}
.yhq2-wrap .yhq2-list .sub-list .right .ticket {
  padding-top: 1vw;
  justify-content: center;
  align-items: baseline;
  height: 6vw;
}
.yhq2-wrap .yhq2-list .sub-list .right .num {
  font-size: 42upx;
  font-weight: 600;
}
.yhq2-wrap .yhq2-list .sub-list .right .unit {
  font-size: 24upx;
}
.yhq2-wrap .yhq2-list .sub-list .right .criteria {
  justify-content: center;
  font-size: 28upx;
}
.yhq2-wrap .yhq2-list .sub-list .right .use {
  width: 50%;
  height: 40upx;
  justify-content: center;
  align-items: center;
  font-size: 24upx;
  background-color: #fff;
  color: #ee827f;
  border-radius: 40upx;
  padding: 0 10upx;
}
/*
			<view class="carrier" :class="[theIndex==index?'open':oldIndex==index?'close':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
				<view class="left">
					<view class="title">
						10元日常用品类
					</view>
					<view class="term">
						2019-04-01~2019-05-30
					</view>
				</view>
				<view class="right">
					<view class="ticket">
						<view class="num">
							10
						</view>
						<view class="unit">
							元
						</view>
					</view>
					<view class="criteria">
						满50使用
					</view>
					<view class="use">
						去使用
					</view>
				</view>
			</view>
			* 
			* */
.yhq2-wrap .yhq2-list .sub-list.invalid {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
}
.yhq2-wrap .yhq2-list .sub-list.showvalid {
  display: flex;
  animation: showValid 0.2s linear both;
}
.yhq2-wrap .yhq2-list .sub-list.showinvalid {
  display: flex;
  animation: showInvalid 0.2s linear both;
}
</style>
